<template>
	<!-- 部门管理 -->
	<div style="height:3000px">
		<v-card>
			<v-card-title>
				<v-btn class="ml-2" small tile color="primary" @click="departmentModel={},editdepartmentDialog=true">
					创建部门
				</v-btn>

				<v-divider class="mx-4" inset vertical></v-divider>

				<v-row class="mt-2">
					<v-col cols="12" sm="3" md="2">
						<v-text-field label="部门代码" v-model="departmentQuery.code" dense outlined>
						</v-text-field>
					</v-col>
					<v-col cols="12" sm="3" md="2">
						<v-text-field label="部门名称" v-model="departmentQuery.name" dense outlined>
						</v-text-field>
					</v-col>
					<v-col>
						<v-btn color="primary" @click="search">查询</v-btn>
						<v-btn class="ml-3" depressed color="primary" @click="refreshApps">
							刷新</v-btn>
					</v-col>
				</v-row>
			</v-card-title>
			<v-card-text>
				<v-row>
					<!-- <v-col cols="12" md="5">
						<v-card>
							<v-card-text>
								<v-alert text color="blue-grey" class="text-center">部门信息</v-alert>
								<v-treeview item-disabled="locked" v-model="selectionDepartments"
									:items="departmentTrees" item-key="id" return-object activatable open-on-click>
									<template v-slot:prepend="{ item, open }">
									
										<v-tooltip top>
											<template v-slot:activator="{ on, attrs }">
												<v-icon v-bind="attrs" v-on="on" class="ml-2" small tile color="primary"
													@click="openNextNodeDialog(item)">
													mdi-plus-thick
												</v-icon>
											</template>
											<span>新增下级部门</span>
										</v-tooltip>


										<v-tooltip top>
											<template v-slot:activator="{ on, attrs }">
												<v-icon v-bind="attrs" v-on="on" class="ml-2" small tile color="success"
													@click="editdepartmentDialog=true,departmentModel=item">
													mdi-pencil
												</v-icon>
											</template>
											<span>编辑当前部门</span>
										</v-tooltip>

										<v-tooltip top>
											<template v-slot:activator="{ on, attrs }">
												<v-icon v-bind="attrs" v-on="on" class="ml-2" small tile color="#0c1cdd"
													@click="updateBomClick(item.model)">
													mdi-card-account-details
												</v-icon>
											</template>
											<span>为当前部门添加角色</span>
										</v-tooltip>

							
									</template>
								</v-treeview>
							</v-card-text>
							<v-card-actions></v-card-actions>
						</v-card>

					</v-col> -->
					<v-col cols="12" md="12">
						<v-card>
							<v-card-text>
								<v-alert text color="blue-grey" class="text-center">部门用户信息</v-alert>
								<v-data-table :headers="departmentHeaderList" :items="departmentDataList" small
									fixed-header item-key="id" dense class="text-no-wrap" loading-text="正在加载请稍等......"
									:loading="departmentLoading" :options.sync="departmentOptions"
									:footer-props="vuetifyDefaultPage" :server-items-length="departmentTotalCount"
									show-expand single-expand>
									<template v-slot:item.actions="{ item }">
										<div>
											<v-btn class="ml-2" small tile color="primary"
												@click="editdepartmentDialog=true,departmentModel=item">
												编辑
											</v-btn>
											<v-btn class="ml-2" small tile color="red"
												@click="deletedepartmentClick(item)">
												删除
											</v-btn>
										</div>
									</template>
									<template v-slot:item.usercount="{ item }">
										<a>{{item.userList.length}}</a>
									</template>

									<template v-slot:expanded-item="{ headers, item }">
										<td :colspan="headers.length">
											<v-card>
												<v-card-title>
													<v-text-field v-model="departmentSearch" append-icon="mdi-magnify"
														label="搜索" single-line hide-details></v-text-field>
												</v-card-title>
												<v-card-text>
													<v-data-table :search="departmentSearch" :headers="[
														{text: '真实姓名',align: 'center',value: 'realname',filterable: true},
													  {text: '员工工号',align: 'center',value: 'code',filterable: true},
														{text: '登录账号',align: 'center',value: 'name',filterable: true},
														{text: '邮箱地址',align: 'center',value: 'email',filterable: true},
														{text: '手机号码',align: 'center',value: 'phonenumber',filterable: true},
														{text: '是否责任人',align: 'center',value: 'isresponsible',filterable: true},
													 ]" :items="item.userList" small fixed-header item-key="id" dense class="text-no-wrap"
														:footer-props="vuetifyDefaultPage">
														<template v-slot:item.isresponsible="{ item }">
															<a v-if="item.isresponsible"
																style="color: #67C23A;">是责任人</a>
															<a v-else>否</a>
														</template>
													</v-data-table>
												</v-card-text>
											</v-card>
										</td>
									</template>
								</v-data-table>

							</v-card-text>
							<v-card-actions></v-card-actions>
						</v-card>

					</v-col>
				</v-row>
			</v-card-text>
		</v-card>

		<v-dialog v-model="editdepartmentDialog" width="800">
			<v-card>
				<v-card-title>编辑部门信息</v-card-title>
				<v-card-text>
					<v-select v-model="departmentModel.type" :items="departmentTypeList" label="部门所属" outlined>
					</v-select>
					<v-row>
						<v-col cols="12" sm="3" md="10">
							<v-text-field v-model="departmentModel.keypathstr" disabled label="上级部门" outlined>
							</v-text-field>
						</v-col>
						<v-col cols="12" sm="3" md="2">
							<v-btn class="mt-2 mr-2" tile color="primary" @click="showDepartmentTreeDialogClick">选择上级部门
							</v-btn>
						</v-col>
					</v-row>
					<!-- :disabled="departmentModel.id!==undefined" -->
					<v-text-field label="部门代码(自动生成)" disabled v-model="departmentModel.code" dense outlined>
					</v-text-field>
					<v-text-field label="部门名称" v-model="departmentModel.name" dense outlined>
					</v-text-field>
				</v-card-text>
				<v-card-actions>
					<v-spacer></v-spacer>
					<v-btn color="success" class="mr-4" text @click="editdepartmentSubmit">确认</v-btn>
					<v-btn color="warning" class="mr-4" text @click="close">取消</v-btn>
				</v-card-actions>
			</v-card>
		</v-dialog>

		<!-- 部门结构 -->
		<v-dialog v-model="showDepartmentTreeDialog" width="400">
			<v-card>
				<v-container>
					<v-row>
						<v-col>
							<v-alert text color="blue-grey">选择上级部门</v-alert>
							<v-treeview item-disabled="locked" v-model="selectionDepartments" :items="departmentTrees"
								item-key="id" return-object activatable open-on-click>
								<template v-slot:prepend="{ item, open }">
									<v-radio-group v-model="radioGroup" dense>
										<v-radio :disabled="departmentModel.id==item.id" v-model="item" :key="item.id">
										</v-radio>
									</v-radio-group>
								</template>
							</v-treeview>
						</v-col>
					</v-row>
				</v-container>
				<v-card-actions>
					<v-spacer></v-spacer>
					<v-btn color="success" class="mr-4" @click="confireSelectDepartment">确认</v-btn>
					<v-btn color="warning" class="mr-4" @click="showDepartmentTreeDialog=false">取消</v-btn>

				</v-card-actions>
			</v-card>
		</v-dialog>
	</div>
</template>

<script>
	export default {
		name: 'department_manager',
		components: {

		},
		data: () => ({
			radioGroup: null,
			departmentQuery: {
				code: '',
				name: '',
			},
			pramterEnums: ['AndonExceptionType'],
			departmentTypeList: [],
			departmentHeaderList: [{
					text: '操作',
					align: 'center',
					value: 'actions',
					filterable: false,
					class: 'fixed'
				},
				{
					text: '部门代码',
					align: 'left',
					value: 'code',
					filterable: false,
					class: 'fixed'
				},
				{
					text: '部门名称',
					align: 'left',
					value: 'name',
					filterable: false,
					class: 'fixed'
				},
				{
					text: '部门用户数量',
					align: 'center',
					value: 'usercount',
					filterable: false,
					class: 'fixed'
				},
				{
					text: '部门路径',
					align: 'left',
					value: 'keypathstr',
					filterable: false,
					class: 'fixed'
				},
				{
					text: '部门所属',
					align: 'center',
					value: 'typename',
					filterable: false,
					class: 'fixed'
				},
			],
			departmentDataList: [],
			departmentTotalCount: 0,
			departmentLoading: true,
			departmentOptions: { //页数
				page: 1,
				//每页行数
				itemsPerPage: 10
			},
			vuetifyDefaultPage: {
				'items-per-page-text': '每页个数',
				'items-per-page-options': [5, 10, 20, 50, 100]
				// 'items-per-page-all-text': '100'
			},
			editdepartmentDialog: false,
			departmentModel: {},
			showDepartmentTreeDialog: false,
			departmentTrees: [],
			selectionDepartments: [],
			departmentSearch: ''
		}),
		watch: {
			departmentOptions: {
				handler() {
					this.search()
				},
				deep: true
			},
		},
		created() {
			this.loadEnumList()
			this.loadDepartmentTree()
		},
		methods: {
			async loadEnumList() {

				var response = await this.$httpRequest({
					url: `MES/MESCommon/GetTypes`,
					method: 'post',
					data: this.pramterEnums
				})
				if (response.status == 1) {
					this.departmentTypeList = response.data
				}

			},
			async search() {
				this.departmentLoading = true
				var response = await this.$httpRequest({
					url: `SPM/Department/LoadPage?code=${this.departmentQuery.code}&name=${this.departmentQuery.name}&
						pageNumber=${this.departmentOptions.page}&
						pageSize=${this.departmentOptions.itemsPerPage}`,
					method: 'get',
				})
				if (response.status == 1) {
					this.departmentDataList = response.data.result
					this.departmentTotalCount = response.data.pagination.totalRecords
					this.departmentLoading = false
				} else {
					this.$message.error(response.info)
				}
			},
			async refreshApps() {
				this.departmentQuery.code = ''
				this.departmentQuery.name = ''
				await this.search()
			},
			async editdepartmentSubmit() {
				var url = ''
				if (this.departmentModel.id != undefined && this.departmentModel.id > 0) {
					url = `SPM/Department/EditDepartment`
				} else {
					url = `SPM/Department/AddDepartment`
				}
				var response = await this.$httpRequest({
					url: url,
					method: 'post',
					data: this.departmentModel
				})

				if (response.status == 1) {
					this.$message.success(response.info)
					this.close()
					await this.search()
				} else {
					this.$message.error(response.info)
				}
			},
			close() {
				// this.departmentModel = {}
				// this.departmentTrees = []
				this.editdepartmentDialog = false
				// this.showDepartmentTreeDialog = false
			},
			async deletedepartmentClick(item) {
				var response = await this.$httpRequest({
					url: `SPM/Department/DeleteDepartment/${item.id}`,
					method: 'delete'
				})
				if (response.status == 1) {
					this.$message.success(response.info)
					this.search()
				} else {
					this.$message.error(response.info)
				}
			},
			async loadDepartmentTree() {
				var response = await this.$httpRequest({
					url: `SPM/Department/GetDepartmentTree?type=${this.departmentModel.type}`,
					method: 'post'
				})
				if (response.status == 1) {
					this.departmentTrees = response.data.departments
				}
			},
			//打开部门树赋值对话框
			async showDepartmentTreeDialogClick() {

				this.showDepartmentTreeDialog = true
				var response;
				if (this.departmentModel.id != null && this.departmentModel.id != undefined && this.departmentModel
					.id > 0) {
					response = await this.$httpRequest({
						url: `SPM/Department/GetDepartmentTree?type=${this.departmentModel.type}&isOpenLock=true`,
						method: 'post',
						data: [this.departmentModel]
					})
				} else {
					response = await this.$httpRequest({
						url: `SPM/Department/GetDepartmentTree?type=${this.departmentModel.type}`,
						method: 'post'
					})
				}


				if (response.status == 1) {
					this.departmentTrees = response.data.departments
				}
			},
			//确认选中的部门
			async confireSelectDepartment() {
				if (this.radioGroup != null) {
					this.departmentModel.keypathstr = this.radioGroup.parentname
					this.departmentModel.parentid = this.radioGroup.id
					this.departmentModel.keypath = this.radioGroup.keypath
				}
				this.showDepartmentTreeDialog = false
				console.log(this.radioGroup)
			},
			//创建下级部门
			openNextNodeDialog(item) {
				console.log(item)
				this.departmentModel.type = item.type
				this.departmentModel.keypathstr = item.parentname
				this.departmentModel.keypath = item.keypath
				this.editdepartmentDialog = true
			},
		},

	}
</script>

<style>
</style>
